<template>
  <div>
    <h2>TsLoad</h2>
    <p id="box">
      title:{{ title }}
    </p>

    <button ref="btn" @click="num++">{{ num }}</button>
  </div>
</template>
<script>
// new Vue()
export default {
  data() {
    return {
      title: 'hello',
      num: 10,
    }
  },
  beforeCreate() {
    console.log('beforeCreate', 'vue对象创建之前执行', this.title);
  },
  created() {
    console.log('created', 'vue对象创建完成后执行', this.title, document.getElementById('box'));
  },
  beforeMount() {
    console.log('beforeMount', 'DOM被渲染前', this.title, document.getElementById('box'));
  },
  beforeUpdate() {
    console.log('beforeUpdate', '页面更新前', this.$refs.btn.innerHTML);
  },
  updated() {
    console.log('updated', '页面更新后', this.$refs.btn.innerHTML);
  },
  mounted() {
    console.log('mounted', 'DOM被渲染完成', this.title, document.getElementById('box'));
  },
  beforeDestroy() {
    console.log('beforeDestroy', '组件被销毁前');
  },
  destroyed() {
    console.log('destroyed', '组件被销毁后');
  },
  methods: {
    log(str) {
      console.log(str + '!!');
    }
  },

}
</script>